<template>
  <div class="index-box">
    <el-button type="primary" @click="showStaticBoard">打印</el-button>
    <div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="date" label="一氧化碳">
        </el-table-column>
        <el-table-column prop="name" label="二氧化碳">
        </el-table-column>
        <el-table-column prop="name" label="乙烯">
        </el-table-column>
        <el-table-column prop="name" label="乙炔">
        </el-table-column>
        <el-table-column prop="name" label="甲烷">
        </el-table-column>
        <el-table-column prop="name" label="姓名">
        </el-table-column>
        <el-table-column prop="name" label="姓名">
        </el-table-column>

        <el-table-column prop="name" label="姓名">
        </el-table-column>
        <el-table-column prop="name" label="姓名">
        </el-table-column>
        <el-table-column prop="name" label="姓名">
        </el-table-column>
        <el-table-column prop="name" label="姓名">
        </el-table-column>


      </el-table>
    </div>
    <div id="produceRadio1" style="width: 500px; height: 300px;"> </div>
    <el-dialog class="dialog" title="预览" @open="handleDialogOpen" :visible.sync="StaticBoard" width="80%"
      style="margin-top: 10px !important;">
      <div id="printView">
        <div style="page-break-after:always" class="box">
          <div id="produceRadio"> </div>
          <div id="produceRadioo"></div>
          <div class="table">
            <table id="printable-table">
              <thead>
                <tr>
                  <th>表头1</th>
                  <th>表头2</th>
                  <!-- 其他表头 -->
                </tr>
              </thead>
              <tbody>
                <!-- 表格数据行 -->
                <tr v-for="(item, index) in tableData" :key="index">
                  <td>{{ item.date }}</td>
                  <td>{{ item.name }}</td>
                  <!-- 其他数据 -->
                </tr>

              </tbody>
            </table>
          </div>
          <div class="sign">

            <div>
              <div>制表：</div>
              <div></div>
            </div>

            <div>
              <div>通防部：</div>
              <div></div>
            </div>


            <div>
              <div>总工程师：</div>
              <div></div>
            </div>


            <div>
              <div>矿长：</div>
              <div></div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button v-print="'#printView'" type="primary">打 印</el-button> -->
        <el-button v-print="printViewInfo" type="primary">打 印</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  components: {},
  data() {
    return {
      //展示静态看板的弹窗控制
      StaticBoard: false,
      msg: "打印",
      printViewInfo: {
        id: "printView", //打印区域的唯一的id属性
        popTitle: '孙店煤业报表打印', // 页眉文字 （不设置时显示undifined）（页眉页脚可以在打印页面的更多设置的选项中取消勾选）
        extraHead: '孙店煤业', // 最左上方的头部文字，附加在head标签上的额外标签，使用逗号分割
        preview: false, // 是否启动预览模式，默认是false （开启预览模式ture会占满整个屏幕，不建议开启，除非业务需要）
        previewTitle: '孙店煤业', // 打印预览的标题(预览模式preview为true时才显示)
        previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印(预览模式preview为true时才显示)
        zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
        previewBeforeOpenCallback(that) { console.log('正在加载预览窗口！'); console.log(that.msg, this) }, // 预览窗口打开之前的callback (预览模式preview为true时才执行) （that可以取到data里的变量值）
        previewOpenCallback() { console.log('已经加载完预览窗口，预览打开了！') }, // 预览窗口打开时的callback (预览模式preview为true时才执行)
        beforeOpenCallback() { console.log('开始打印之前！') }, // 开始打印之前的callback
        openCallback() { console.log('执行打印了！') }, // 调用打印时的callback
        closeCallback() { console.log('关闭了打印工具！') }, // 关闭打印的callback(无法区分确认or取消)
        clickMounted() { console.log('点击v-print绑定的按钮了！') },
        // url: 'http://localhost:8080/', // 打印指定的URL，确保同源策略相同
        // asyncUrl (reslove) {
        //   setTimeout(() => {
        //     reslove('http://localhost:8080/')
        //   }, 2000)
        // },
        standard: '',
        extarCss: ''
      },
      tableData: []
    }
  },
  mounted() {
    //此处使用nextTick仅为演示，如果不使用也会报错
    this.initSetBarChart2()
    this.tableData = [{
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    }, {
      date: '2016-05-04',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1517 弄'
    },
    {
      date: '2016-05-01',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1519 弄'
    },

    {
      date: '2016-05-01',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1519 弄'
    },
    {
      date: '2016-05-01',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1519 弄'
    },
    {
      date: '2016-05-01',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1519 弄'
    },
    {
      date: '2016-05-01',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1519 弄'
    },
    {
      date: '2016-05-01',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1519 弄'
    },
    ]
  },
  methods: {
    showStaticBoard() {
      this.StaticBoard = true
      this.tableData = [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      },
      {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      },

      {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      },
      {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      },
      {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      },
      {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      },
      {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      },
      {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      },

      {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      },

      {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      },

      {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      },

      {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      },

      {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      },

      {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      },

      {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      },

      {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      },

      {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      },

      {
        date: '2016-05-0111',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      },
      ]
    },
    initSetBarChart2() {
      var myChart = echarts.init(document.getElementById("produceRadio1"))
      var option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }
        ]
      };
      myChart.setOption(option)
      console.log(option)
    },
    setBarChart2() {
      var myChart = echarts.init(document.getElementById("produceRadio"))
      var option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }
        ]
      };
      myChart.setOption(option)
      console.log(option)
    },
    setBarChart1() {
      var myChart = echarts.init(document.getElementById("produceRadioo"))
      var option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'bar'
          }
        ]
      };
      myChart.setOption(option)
      console.log(option)
    },
    handleDialogOpen() {
      //dom完全挂载后调用
      this.$nextTick(() => {
        this.setBarChart2()
        this.setBarChart1()
      })
      console.log("this dialog is opened")
    },
  }

}
</script>

<style lang="less" scoped>
// #printView {
//   width: 100%;

//   border: 1px solid red;

// }
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

@media print {

  /* 表格样式 */
  table {
    border-collapse: collapse;
    width: 100%;
  }

  th,
  td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: center;
  }

  thead {
    display: table-header-group;
    /* 表头始终显示 */
  }

  tfoot {
    display: table-footer-group;
    /* 表尾始终显示 */
  }

  tr {
    page-break-inside: avoid;
    /* 避免在页面断裂时打断表行 */
  }
}


#printView {
  width: 99%;

  margin: 0 auto;
}

#produceRadio {
  width: 90%;
  height: 300px;
  // border: 1px solid red;
  margin: 0 auto;
}

#produceRadioo {
  width: 90%;
  height: 300px;
  // border: 1px solid red;
  margin: 0 auto;
}

.table {
  width: 90%;
  margin: 20px auto;
  // border: 1px solid red;
}

.sign {
  width: 90%;
  height: 60px;
  // border: 1px solid red;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;

  >div {
    width: 200px;
    // border: 1px solid red;
    display: flex;
    margin: 0 10px;

    >div:nth-child(1) {
      width: 45%;
      text-align: right;
      // border: 1px solid red;
    }

    >div:nth-child(2) {
      width: 55%;
      border-bottom: 1px solid black;
    }
  }
}
</style>